<template>
<div class="tw-labellists">
  <template v-if="list.length > 0">
    <ul class="tw-labellist" :style="style">
     <li v-for="(item,idx) in list"
      :key="idx" @click="handleClick(item)"
      class="tw-labellist-item"
      :class="{active: item.value && item.value===curvalue}">

      <template v-if="hasBeforeDot">
        <i class="tw-labellist-item-dot"
          :class="{'xcircle': dotType === 'circle'}"></i>
      </template>

      <label :style="labelStyle" :class="{xnowrap: !wrap}" v-show="item.name">{{item.name}}</label>
     </li>
   </ul>
  </template>
  <tw-lib-nodata v-if="mulLine && list.length===0" />
</div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import nodata from '../tw-lib-base/no-data/no-data'
import padding from '../tw-lib-base/padding/mixins'
import border from '../tw-lib-base/border/mixins'
import * as file from './file'

export default {
  name: 'header-navigate',

  props,

  mixins: [style, nodata, padding, border],
  data () {
    return {
      curvalue: ''
    }
  },

  computed: {
    style () {
      return Object.assign({
        lineHeight: this.lineHeight,
        fontFamily: this.fontFamily,
        fontSize: this.fontSize,
        color: this.color
      }, this.borderStyle, this.paddingStyle)
    },

    labelStyle () {
      return {
        width: this.labelWidth,
        textAlign: this.labelAlign,
        fontSize: this.labelFontSize,
        color: this.labelColor,
        fontWeight: this.labelFontWeightIsBold ? '700' : '400'
      }
    }
  },

  methods: {
    setStyle () {
      let style = ''
      if (this.mulLine) {
        let n = this.lineNum + 'n+0'
        style += `
          ::root.tw-labellists .tw-labellist {
            display: flex;
            flex-wrap: wrap;
          }

          ::root.tw-labellists .tw-labellist-item {
            align-items: center;
            width: ${this.itemWidth};
            padding: ${this.padding};
            border-radius:  ${this.labelRadius};
            margin-right: ${this.labelLeft};
            margin-bottom: ${this.labelTop};
          }
          ::root.tw-labellists .tw-labellist-item:nth-child(${n}) {
            margin-right: 0;
          }

          ::root.tw-labellists .tw-labellist-item .tw-labellist-item-dot {
            background-color: ${this.dotColor};
          }

        `
      }
      style += `
        ::root.tw-labellists .tw-labellist-item {
          cursor: pointer;
        }

        ::root.tw-labellists .tw-labellist-item:hover,
        ::root.tw-labellists .tw-labellist-item.active {
          background-color: ${this.actBgColor};
        }

        ::root.tw-labellists .tw-labellist-item:hover .tw-labellist-item-dot,
        ::root.tw-labellists .tw-labellist-item.active .tw-labellist-item-dot {
          background-color: ${this.dotActColor};
        }

      `


      this.addStyle(style)
    },
    handleClick(item, option = { showProgress: true }) {
      this.curvalue = item.value

      let fliename = item.name || this.getFilenameFromUrl(url)
      if (option === true) {
        file.saveAs(new Blob([item.url], { type: 'text/plain' }), fliename)
      } else {
        file.download(item.url, fliename, option)
      }
    },
    getFilenameFromUrl (url) {
      return url.replace(/.*\//, '').replace(/\?.*/, '')
    }
  },
  watch: {
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
